<template>
  <div class="orderout">
    <div class="layout">
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-nav">
            <MenuItem name="1" to="/">
              <Icon type="logo-octocat" />
              <font aria-setsize="4" color="red">猫眼电影</font>
            </MenuItem>
            <MenuItem>
              <Icon type="ios-navigate"></Icon>
              西安
            </MenuItem>
            <MenuItem name="2" to="/"> 首页 </MenuItem>
            <MenuItem name="4" to="/choose"> 电影 </MenuItem>
            <MenuItem name="4" to="/"> 影院 </MenuItem>
            <MenuItem name="4" to="/"> 演出 </MenuItem>
            <MenuItem name="4" to="/"> 榜单 </MenuItem>
            <MenuItem name="4" to="/"> 热点 </MenuItem>
            <MenuItem name="4" to="/"> 商城 </MenuItem>

            <MenuItem name="4" to="/">
              <Icon type="md-phone-portrait" />APP下载
            </MenuItem>
            <!-- <span v-if="!showinfo"
              ><MenuItem name="4" to="/login" @click="logined()">
                登陆
              </MenuItem>
              <MenuItem name="4" to="/regist"> 注册 </MenuItem></span
            >
            <span class="zs" v-if="showinfo"
              >你好{{ uname }}&nbsp;☺&nbsp;<button
                @click="logout()"
                class="logout"
              >
                注销
              </button></span
            > -->
            <div class="layout-logo">
              <Input search enter-button placeholder="Enter something..." />
            </div>
          </div>
        </Menu>
      </Header>
    </div>
    <div class="mid">
      <div class="mid1">
        <div class="mid1a">我的订单</div>
        <div class="mid1b"></div>
        <div class="mid1c">
          <div class="mid1c1">
            <div class="mid1c1a">
              <div class="mid1c1b1">2020.11.20</div>
              <div class="mid1c1b2">猫眼订单号：{{mydata[0].oid}}</div>
            </div>
          </div>
          <div class="mid1c2">
            <div class="mid1c2a">
              <img :src="mydata[0].mpic" class="oimg" />
              <div class="mid1c2b">
                {{mydata[0].mname}}<br />
                {{mydata[0].maname}}}<br />
                VIP8号城堡厅 4排08座<br />
                周五 12月4日 14:00
              </div>
              <div class="mid1c2c">&yen;35</div>
              <div class="mid1c2d">待支付</div>
              <div class="mid1c2e"><button class="paybtn">付款</button></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div><img src="../assets/foot.png" class="fimg" /></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
      mydata:{}
    }
  },
  methods:{
    getOneOrder(uname){
      axios.get("api/order/getOne?uname="+uname).then(res=>{
          this.mydata=res.data.data
          console.log(res.data.data)
      })
    }
  },
  mounted(){
    // alert(this.$route.params.uname)
    this.getOneOrder(this.$route.params.uname)
  }
}
</script>

<style scoped>
.logout {
  width: 100px;
  height: 50px;
  margin-top: 6px;
  text-align: center;
  line-height: 50px;
  background-color: #98b898;
}
.layout-logo {
  width: 200px;
  height: 10px;
  background: #5b6270;
  /* border-radius: 3px; */
  float: right;
  position: relative;
  top: 15px;
  right: 150px;
}
.layout-nav {
  /* width: 420px;
  margin: 0 auto; */
  margin-right: 20px;
}
.ivu-layout {
  height: 100%;
}
.orderout {
  margin-left: -140px;
}
.mid {
  height: 700px;
}
.fimg {
  width: 100%;
}
.mid1 {
  height: 700px;
  width: 80%;
  margin: auto;
  /* background-color: aqua; */
}
.mid1a {
  height: 80px;
  /* background-color: burlywood; */
  color: red;
  font-size: 45px;
  margin-left: 20px;
  text-align: left;
  border-bottom: solid 1px grey;
}
.mid1b {
  height: 20px;
}
.mid1c {
  height: 260px;
  /* background-color: aqua; */
  margin-left: 20px;
  border: solid 1px rgb(223, 215, 215);
}
.mid1c1 {
  height: 60px;
  float: left;
}
.mid1c2 {
  height: 200px;
  /* background-color: rgb(199, 214, 230); */
}
/* .mid1c1a {
  width: 100px;
  float: left;
  background-color: red;
  text-align: center;
  line-height: 60px;
} */
.mid1c1b1 {
  width: 200px;
  height: 60px;
  background-color: rgb(199, 214, 230);
  text-align: center;
  line-height: 60px;
  font-size: 20px;
}
.mid1c1b2 {
  width: 1300px;
  height: 60px;
  background-color: rgb(199, 214, 230);
  margin-top: -60px;
  margin-left: 200px;
  text-align: center;
  line-height: 60px;
  font-size: 20px;
  text-align: left;
}
.mid1c2a {
  height: 200px;
  width: 100px;
  /* background: orangered; */
}
.mid1c2b {
  height: 200px;
  width: 250px;
  /* background: white; */
  margin-left: 110px;
  margin-top: -184px;
  line-height: 30px;
  font-size: 20px;
}
.mid1c2c {
  height: 140px;
  width: 100px;
  /* background: red; */
  margin-left: 1000px;
  margin-top: -140px;
  line-height: 140px;
  font-size: 20px;
}
.mid1c2d {
  height: 200px;
  width: 100px;
  /* background: greenyellow; */
  margin-left: 1150px;
  margin-top: -200px;
  line-height: 140px;
  font-size: 20px;
      margin-top: -140px;
}
.mid1c2e {
  height: 78px;
  width: 100px;
  /* background: blue; */
  margin-left: 1400px;
      margin-top: -143px;
  font-size: 20px;
     
}
.oimg {
  padding-top: 27px;
      width: 100px;
    margin-left: 10px;
}
.paybtn {
  display: block;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #f03d37;
  color: #fff;
  -webkit-box-shadow: 0 2px 10px -2px #f03d37;
  box-shadow: 0 2px 10px -2px #f03d37;
  border-radius: 15px;
  margin-bottom: 8px;
  margin-top: -142px;
}
</style>